<template>
  <div class="panle_sounds">
      <PanleHead v-bind="$attrs">
          {{$attrs.title}}
          <template slot="title">
              <slot></slot>
          </template>
          </PanleHead>
      <div class="panle_body">
          <PanleItem 
          v-for="item in ($attrs.sound?$attrs.sound.slice(0,3):$attrs.sound)"
          :key="item.id"
          :item="item"
          ></PanleItem>
         
      </div>
  </div>
</template>

<script>
import PanleItem from "components/home/recommend/PanleItem"
import PanleHead from "components/home/recommend/PanleHead"
export default {
    components:{
        PanleItem,
        PanleHead
    }
}
</script>

<style lang="stylus" scoped>
.panle_sounds
    padding-bottom .16rem
    margin .1rem 0
    
    .panle_body
        min-height 1.70rem
        display flex
        justify-content space-around
        align-items center
        margin 0 .14rem

</style>